
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax图片上传</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
​
<form id="photoForm" class="form-horizontal" method="post" action="/admin/image" >
    {{csrf_field()}}
    <div class="form-group">
        <label for="name" class="col-sm-2 control-label">图片：</label>
        <div class="col-sm-10">
            <input type="file" name="photo[]" multiple="multiple" onchange="doUpload()"  />
        </div>
    </div>
    <div class="form-group">
        <label for="intro" class="col-sm-2 control-label">预览</label>
        <div class="col-sm-4" id="imgs">
            {{--<img src="" alt="" id="avatar_url" width="100";height="100">--}}
        </div>
    </div>
    <div class="form-group">
        <label for="intro" class="col-sm-2 control-label">
            <a href="/admin/image">提交</a>
        </label>
    </div>
    ​
</form>
​
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
    function doUpload() {
        $.ajaxSetup({
            headers: { 'X-CSRF-TOKEN' : '{{ csrf_token() }}' }
        });
        var formData = new FormData($("#photoForm")[0]);
//        console.log(formData);
        $.ajax({
            url: "{{url('admin/image')}}",
            type: 'POST',
            data: formData,
            contentType: false,
            processData: false,
            success: function (returndata) {
                var imgs = eval("("+returndata+")");
                var row = '';
                for(var i in imgs.data){
                    console.log(imgs.data[i]['url']);
                    row += '<img src="'+imgs.data[i]['url']+'" alt="" width="100" height="100">';
                }
                $("#imgs").html(row);
            },
            error: function (returndata) {
                console.log(returndata);
            }
        });
    }
</script>
​
</body>
</html>